﻿@model Dbz.HomeworkHub.Frontend.Models.TopicModel
<h2>Themengebiete verwalten</h2>
<p>
    Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?
</p>
<div>
    <div style="max-width: 326px; margin-left: auto; margin-right: 0">
        <button class="btn btn-default btn-sm btn-success" onclick="newTopic()"><span class="glyphicon glyphicon-plus"></span>Neues Themengebiet</button>
        <button class="btn btn-default btn-sm btn-danger" onclick=""><span class="glyphicon glyphicon-remove"></span>Themengebiete löschen</button>
    </div>
</div>

<div>
    <div style="margin-top: 10px;">
        <table class="table table-striped table-bordered table-hover table-responsive table-condensed">
            <thead>
                <tr>
                    <th style="width: 30px; text-align:center;">
                        <input id="topicCheckAll" type="checkbox" />
                    </th>
                    <th style="width: 40px; text-align:center;">#</th>
                    <th>Bezeichnung</th>
                    <th style="width: 30px;"></th>
                    <th style="width: 30px;"></th>
                </tr>
            </thead>
            <tbody id="topicTableBody" data-bind="foreach: AdminAreaModel.TopicOverviewModel.TopicList.Items">
                <tr data-bind="attr: { 'data-recordId': TopicId }">
                    <td style=" text-align:center;">
                        <input type="checkbox" />
                    </td>
                    <td style=" text-align:center;" data-bind="text: TopicId"></td>
                    <td>
                        <span data-bind="text: Name"></span>
                    </td>
                    <td>
                        <button class="btn btn-default btn-xs btn-primary" title="Bearbeiten" onclick='editTopic(this)'><span class="glyphicon glyphicon-pencil"></span></button>
                    </td>
                    <td>
                        <button class="btn btn-default btn-xs btn-danger" title="Löschen" onclick='deleteTopic(this)'><span class="glyphicon glyphicon-remove"></span></button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<p>
    Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'?
</p>

<div class="modal fade" id="editTopicModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Themengebiet bearbeiten</h4>
            </div>
            <div class="modal-body">
                <p>
                    Ändern Sie hier die Daten des ausgewählten Themengebietes. Die Änderungen werden mit einem Klick auf die Schaltfläche "Speichern" übernommen.
                </p>
                <form role="form">
                    <div class="form-group">
                        <label for="editFormBezeichnung">Bezeichnung</label>
                        <input type="email" class="form-control" id="editFormBezeichnung" placeholder="Bezeichnung eingeben..." data-bind="value: AdminAreaModel.TopicOverviewModel.CurrentEditModel.Name">
                    </div>
                    <div class="form-group">
                        <label for="editFormBeschreibung">Beschreibung</label>
                        <textarea class="form-control" id="editFormBeschreibung" rows="6" data-bind="value: AdminAreaModel.TopicOverviewModel.CurrentEditModel.Description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="editTopicOk()">Speichern</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="newTopicModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Themengebiet erstellen</h4>
            </div>
            <div class="modal-body">
                <p>
                    Geben Sie hier die Daten des neu anzulegenden Themengebietes an. Die Änderungen werden mit einem Klick auf die Schaltfläche "Speichern" übernommen.
                </p>
                <form role="form">
                    <div class="form-group">
                        <label for="newFormBezeichnung">Bezeichnung</label>
                        <input type="email" class="form-control" id="newFormBezeichnung" placeholder="Bezeichnung eingeben..." data-bind="value: AdminAreaModel.TopicOverviewModel.NewTopicModel.Name">
                    </div>
                    <div class="form-group">
                        <label for="newFormBeschreibung">Beschreibung</label>
                        <textarea class="form-control" id="newFormBeschreibung" rows="6" data-bind="value: AdminAreaModel.TopicOverviewModel.NewTopicModel.Description"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Abbrechen</button>
                <button type="button" class="btn btn-primary" onclick="newTopicOk()">Speichern</button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">


    $(document).ready(function () {


        refreshTopicList();

        $("#topicCheckAll").change(function () {

            var baseCheckBox = $(this);
            $("#topicTableBody").children().each(function () {
                $("td:first", this).each(function () {

                    $(this).children().each(function () {

                        $(this).prop('checked', baseCheckBox.prop('checked'));
                    });
                });
            });
            
        });
    });


    function refreshTopicList() {
        $.ajax({
            url: '@Url.Action("ListTopics", "Topic")',
            success: function (data) {
                model.AdminAreaModel.TopicOverviewModel.TopicList.Fill(data);
            }
        });

    }

    function newTopicOk() {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("New", "Topic")',
            data: model.AdminAreaModel.TopicOverviewModel.NewTopicModel.JsonObj(),
            dataType: 'json',
            success: function (data) {
                model.AdminAreaModel.TopicOverviewModel.TopicList.Fill(data);
                $('#newTopicModal').modal('hide');
                model.AdminAreaModel.TopicOverviewModel.NewTopicModel.Clear();
            }
        });
    }

    function editTopicOk() {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("Update", "Topic")',
            data: model.AdminAreaModel.TopicOverviewModel.CurrentEditModel.JsonObj(),
            dataType: 'json',
            success: function (data) {
                model.AdminAreaModel.TopicOverviewModel.TopicList.Fill(data);
                $('#editTopicModal').modal('hide');
            }
        });
    }

    function newTopic() {
        $('#newTopicModal').modal('show');
    }

    function editTopic(item) {
        var id = $(item).parent().parent().data("recordid");
        model.AdminAreaModel.TopicOverviewModel.Select(id);
        $('#editTopicModal').modal('show');
    }

    function deleteTopic(item) {


        bootbox.dialog({
            message: "Wollen Sie das Themengebiet wirklich löschen?",
            title: "Wirklich löschen ?",
            buttons: {
                success: {
                    label: "Ja",
                    className: "btn-success",
                    callback: function () {

                        var id = $(item).parent().parent().data("recordid");
                        var obj = model.AdminAreaModel.TopicOverviewModel.TopicList.Get(id);

                        $.ajax({
                            type: 'POST',
                            url: '@Url.Action("Delete", "Topic")',
                            data: obj.JsonObj(),
                            dataType: 'json',
                            success: function (data) {
                                model.AdminAreaModel.TopicOverviewModel.TopicList.Remove(id);
                            }
                        });

                    }
                },
                main: {
                    label: "Nein",
                    className: "btn-default",
                    callback: function () {
                    }
                }
            }
        });
    }



</script>
